<template>
	<view class=" flex align-stretch" hover-class="bg-light" @click="$emit('click')">
		<view class="flex align-center justify-center py-2 pl-3" v-if="showLeftIcon">
			<slot name="icon"></slot>
			<image :src="cover" v-if="cover" mode="widthFix" :style="coverStyle"></image>
		</view>
		<view class="flex-1 flex align-center justify-between pr-3 py-3 pl-3" :class="border ? 'border-bottom' : ''">
			<slot>
				<text class="font-16 text-dark">{{title}}</text>
			</slot>
			<view v-if="showTag" style="left: 80px; position: relative;"
				class="bg-danger pl-1 pr-1 rounded-circle font-14 text-white">
				<slot>
					<text class="">{{tag}}</text>
				</slot>
			</view>
			<view class="flex align-center" v-if="showRight">
				<slot name="right"></slot>
				<!-- 右箭头 -->
				<text v-if="showRightIcon" class="iconfont text-hover-dark font-16 icon-icon-arrow-right2"></text>
			</view>
			<view class="flex align-center" v-if="showRights">
				<slot name="right"></slot>
				<!-- 右箭头 -->
				<text v-if="showRightIcons" class="iconfont text-hover-dark font-12 icon-icon-arrow-right2"></text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			// 是否开启下边线
			border: {
				type: Boolean,
				default: true
			},
			// 封面
			cover: {
				type: String,
				default: ""
			},
			// 封面大小
			coverSize: {
				type: [String, Number],
				default: 60
			},
			// 标题
			title: {
				type: String,
				default: ""
			},
			tag: {
				type: String,
				default: ""
			},
			// 显示右边
			showRight: {
				type: Boolean,
				default: true
			},
			// 显示右边
			showRights: {
				type: Boolean,
				default: true
			},
			// 显示左边图标
			showLeftIcon: {
				type: Boolean,
				default: false
			},
			// 是否显示箭头
			showRightIcon: {
				type: Boolean,
				default: true
			},
			// 标签
			showTag: {
				type: Boolean,
				default: false
			},
			showRightIcons: {
				type: Boolean,
				default: true
			}
		},
		computed: {
			coverStyle() {
				return `width: ${this.coverSize}rpx;height: ${this.coverSize}rpx; borderRadius: ${this.coverSize}rpx`
			}
		},
	}
</script>

<style>

</style>